<script setup>
import { h, ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import CustomTable from "@/components/CustomTable/index"; //公共组件
import AddAndEditRoom from "./components/AddAndEditRoom"; //新建编辑房间

// Mock数据
const mockData = Array.from({ length: 50 }, (_, i) => ({
  roomId: `R${1000 + i}`,
  roomType: ["one", "two", "three"][Math.floor(Math.random() * 3)],
  area: Math.floor(Math.random() * 50) + 30,
  currentResidents: Math.floor(Math.random() * 5),
  maxResidents: Math.floor(Math.random() * 3) + 2,
  managementUnit: ["xx单位A部", "xx单位B部", "xx单位管理处"][
    Math.floor(Math.random() * 3)
  ],
  accessControlId: `AC${2000 + i}`,
  accessControlStatus: Math.random() > 0.2 ? "normal" : "fault",
  relatedCameras: Array.from(
    { length: Math.floor(Math.random() * 1) + 1 },
    (_, j) => `CAM${3000 + i}${j}`
  ),
}));

// 数据定义
const customTableData = ref({
  data: mockData,
  currentPage: 1,
  pageSize: 10,
  total: mockData.length,
});
const columns = ref([
  { prop: "roomId", label: "房间ID" },
  { prop: "roomType", label: "房间类型" },
  { prop: "area", label: "面积(㎡)" },
  { prop: "currentResidents", label: "已住人数/准住人数", width: "150" },
  { prop: "managementUnit", label: "管理单位" },
  { prop: "accessControlId", label: "门禁编号" },
  { prop: "accessControlStatus", label: "门禁状态" },
  { prop: "relatedCameras", label: "关联监控", width: "150" },
]);
const refAddAndEditRoom = ref(null);
const selectedRows = ref([]);
const roomTypes = [
  { value: "one", label: "一居室" },
  { value: "two", label: "两居室" },
  { value: "three", label: "三居室" },
];

const cameraOptions = Array.from({ length: 20 }, (_, i) => ({
  value: `CAM${4000 + i}`,
  label: `摄像头${4000 + i}`,
}));

const searchForm = reactive({
  roomId: "",
  roomType: "",
  managementUnit: "",
});

// 查询
const handleSearch = () => {
  customTableData.currentPage = 1;
  fetchData();
};
// 重置
const resetSearch = () => {
  Object.assign(searchForm, {
    roomId: "",
    roomType: "",
    managementUnit: "",
  });
  handleSearch();
};
// 新建房间
const handleAdd = () => {
  refAddAndEditRoom.value.showDialog("新建房间", null, false);
};
// 编辑房间
const handleEdit = (row) => {
  refAddAndEditRoom.value.showDialog("编辑房间信息", row, false);
};
// 查看房间
const handleView = (row) => {
  refAddAndEditRoom.value.showDialog("房间详情", row, true);
};
// 删除数据
const handleDelete = (row) => {
  ElMessageBox.confirm("确认删除该房间记录?", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage.success("删除成功");
      fetchData();
    })
    .catch(() => {});
};
// 导入
const handleImport = () => {
  ElMessage.info("导入功能待实现");
};
// 导出
const handleExport = () => {
  ElMessage.success("导出成功");
};

// 初始化
onMounted(() => {
  fetchData();
});

// 方法定义
const fetchData = () => {
  // 模拟API请求
  setTimeout(() => {
    let data = [...mockData];
    // 模拟筛选
    if (searchForm.roomId) {
      data = data.filter((item) => item.roomId.includes(searchForm.roomId));
    }
    if (searchForm.roomType) {
      data = data.filter((item) => item.roomType === searchForm.roomType);
    }
    if (searchForm.managementUnit) {
      data = data.filter((item) =>
        item.managementUnit.includes(searchForm.managementUnit)
      );
    }
    // 模拟分页
    const start = (customTableData.currentPage - 1) * customTableData.pageSize;
    const end = start + customTableData.pageSize;
    customTableData.data = data.slice(start, end);
    customTableData.total = data.length;
  }, 300);
};
// 表格复选框选中
const handleSelectionChange = (rows) => {
  selectedRows.value = rows;
};
// 表格条数改变
const handleSizeChange = (val) => {
  customTableData.pageSize = val;
  fetchData();
};
// 表格分页切换
const handleCurrentChange = (val) => {
  customTableData.currentPage = val;
  fetchData();
};
</script>

<template>
  <div id="roomManage">
    <div class="topEchars">
      <div class="leftRommNumber">
        <div class="rommNumberTitle">
          <div class="title">房间总数</div>
          <div class="number">8020</div>
        </div>
        <div class="statistics">
          <div class="progress">
            <el-progress type="circle" :percentage="50" width="50" />
          </div>
          <div class="rightTitle">
            <div class="title">一居室</div>
            <div class="number">4010</div>
          </div>
        </div>
        <div class="statistics">
          <div class="progress">
            <el-progress
              type="circle"
              :percentage="25"
              width="50"
              color="red"
            />
          </div>
          <div class="rightTitle">
            <div class="title">一居室</div>
            <div class="number">2005</div>
          </div>
        </div>
        <div class="statistics">
          <div class="progress">
            <el-progress
              type="circle"
              :percentage="25"
              width="50"
              color="yellow"
            />
          </div>
          <div class="rightTitle">
            <div class="title">一居室</div>
            <div class="number">2005</div>
          </div>
        </div>
      </div>
      <div class="rigtHostelNumber">
        <div class="rightStatistics">
          <div class="progress">
            <el-progress
              type="circle"
              :percentage="20"
              width="50"
              color="#888888"
            />
          </div>
          <div class="rightTitle">
            <div class="title">入住数</div>
            <div class="number">24060</div>
          </div>
        </div>
        <div class="rightStatistics">
          <div class="rightTitle">
            <div class="title">入住人员数量</div>
            <div class="number">102002人</div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <!-- 搜索区域 -->
      <el-card shadow="never" class="customCardHead">
        <el-form :inline="true" :model="searchForm" label-width="80px">
          <div class="leftInput">
            <el-form-item label="房间ID">
              <el-input
                v-model="searchForm.roomId"
                placeholder="请输入房间ID"
                clearable
              />
            </el-form-item>
            <el-form-item label="房间类型">
              <el-select
                v-model="searchForm.roomType"
                placeholder="请选择"
                clearable
                popper-class="custom-select-dropdown"
              >
                <el-option
                  v-for="item in roomTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="管理单位">
              <el-input
                v-model="searchForm.managementUnit"
                placeholder="请输入管理单位"
                clearable
              />
            </el-form-item>
          </div>
          <div class="rightBtn">
            <el-form-item>
              <el-button type="primary" @click="handleSearch">
                <el-icon><Search /></el-icon> 搜索</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button @click="resetSearch" class="el-button--default">
                <el-icon><RefreshRight /></el-icon> 重置</el-button
              >
            </el-form-item>
          </div>
        </el-form>
      </el-card>

      <!-- 表格按钮 -->
      <div class="customTableContent">
        <div class="tableTool">
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon> 新增
          </el-button>
          <el-button @click="handleImport" type="success">
            <el-icon><Upload /></el-icon>导入
          </el-button>

          <el-button @click="handleExport" type="warning">
            <el-icon><Download /></el-icon>导出
          </el-button>
        </div>
        <!-- 表格区域 -->
        <div class="tableList">
          <CustomTable
            :currentPageData="customTableData"
            :columns="columns"
            :showSelection="true"
            :showOperation="true"
            @handleSelectionChange="handleSelectionChange"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
          >
            <template #operation="{ row }">
              <el-button type="text" @click="handleView(row)">查看</el-button>
              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(row)">删除</el-button>
            </template>
          </CustomTable>
        </div>
      </div>
    </div>

    <!-- 新建编辑弹窗 -->
    <AddAndEditRoom ref="refAddAndEditRoom" />
  </div>
</template>

<style scoped lang="scss">
#roomManage {
  width: 100%;
  height: 100%;
  background: #0c2145;
  padding: 20px;
  box-sizing: border-box;
  .topEchars {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 15px;

    .leftRommNumber,
    .rigtHostelNumber {
      display: flex;
      background: #102e61;
      width: 70%;
      border-radius: 10px;
      padding: 15px;
      box-sizing: border-box;
    }
    .rommNumberTitle {
      width: 25%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      border-right: 1px solid #fff;
    }
    .title {
      width: 100%;
      font-size: 12px;
    }
    .number {
      font-weight: bold;
      font-size: 16px;
    }
    .rightStatistics {
      width: 50%;
      display: flex;
      justify-content: center;
    }
    .statistics {
      width: 25%;
      display: flex;
      justify-content: center;
    }
    :deep(.el-progress__text) {
      font-weight: bold;
      font-size: 14px !important;
      color: #fff;
    }
    :deep(.el-progress-bar__outer) {
      background-color: #ccc !important;
    }
    .rightTitle {
      text-align: center;
      height: 100%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: center;
      flex-direction: column;
    }
    .progress {
      margin-right: 10px;
    }
    .rigtHostelNumber {
      width: 28%;
    }
  }
  .content {
    width: 100%;
    height: calc(100% - 110px);
    display: flex;
    flex-direction: column; /* 子元素垂直排列 */
  }
}
</style>

